<template>
  <div class="JNPF-common-layout">
         <div class="JNPF-common-layout-center">
           <el-row class="JNPF-common-search-box">
             <el-form>
               <el-col :span="5">
                                     <el-form-item label="时间状态">
                                       <el-date-picker
                                         v-model="queryParams.insertDate"
                                         value-format="yyyy-MM"
                                         type="month"
                                         :picker-options="pickerOptions"
                                         placeholder="选择月">
                                       </el-date-picker>
                                     </el-form-item>
                                   </el-col>
                                   <el-col :span="5">
                                     <el-form-item label="填报状态">
                                       <el-select
                                         v-model="queryParams.status"
                                         value-key="status"
                                         collapse-tags
                                         placeholder="请选择">
                                         <el-option
                                           v-for="(item,index) in stateList"
                                           :key="index"
                                           :label="item.name"
                                           :value="item.name">
                                         </el-option>
                                       </el-select>
                                     </el-form-item>
                                   </el-col>
                                   <el-col :span="10">
                                     <!--                  <el-input-->
                                     <!--                    placeholder="请输入标准中文名称"-->
                                     <!--                    style="width: 300px; margin-right: 30px"-->
                                     <!--                    v-model="keyWord"-->
                                     <!--                    @keyup.enter.native="getList"-->
                                     <!--                    clearable-->
                                     <!--                  >-->
                                     <!--                  </el-input>-->
                                     <el-button type="primary" @click="getListSch()"> 查询 </el-button>
                                     <el-button
                                       icon="el-icon-refresh"
                                       :loading="exportLoading"
                                       @click="reset"
                                     >重置</el-button>
                                     <el-button
                                       :loading="exportLoading"
                                       @click="add"
                                       icon="el-icon-plus"
                                     >新增</el-button>
                                   </el-col>
             </el-form>
           </el-row>
           <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="tableContainer">
                                  <el-table
                                    :data="list"
                                    style="margin:0 auto"
                                    :row-style="{height:'56px'}"
                                  >
                                    <el-table-column fixed   align="center" type="index" label="#" width="100">
                                    </el-table-column>
                                    <el-table-column
                                      fixed
                                      prop="id"
                                      align="center"
                                      label="id"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                      prop="insertDate"
                                      align="center"
                                      label="日期"
                                    >
                                    </el-table-column>
                                    <el-table-column prop="insertUser" align="center" :show-overflow-tooltip="true" label="填报人">
                                    </el-table-column>
                                    <el-table-column prop="updateTime" align="center" label="最后更新日期">
                                    </el-table-column>
                                    <el-table-column
                                      prop="insertStatus"
                                      label="状态"
                                      align="center"
                                      class="name-wrapper"
                                    >
                                      <template slot-scope="scope">
                                        <el-popover trigger="hover" placement="top">
                                          <p>{{ scope.row.insertStatus }}</p>
                                          <div slot="reference" class="name-wrapper">
                                            <el-tag
                                              :type="
                                            scope.row.insertStatus == '已填报'
                                              ? 'success'
                                              : scope.row.insertStatus == '填报中'
                                              ? 'info'
                                              : scope.row.insertStatus == '未填报'
                                              ? 'danger'
                                              : 'info'
                                          "
                                              size="medium"
                                            >
                                              {{ scope.row.insertStatus }}</el-tag
                                            >
                                          </div>
                                        </el-popover>
                                      </template>
                                    </el-table-column>
                                    <el-table-column prop="isActive" align="center" :show-overflow-tooltip="true" label="是否有效">
                                      <template slot-scope="scope">
                                        <el-switch
                                          v-model="scope.row.isActive"
                                          active-color="#13ce66"
                                          :active-value="1"
                                          @change="chageStates(scope.row)"
                                          :inactive-value="0">
                                        </el-switch>
                                      </template>
                                    </el-table-column>
                                    <el-table-column prop="c_C_NAME" align="center" :show-overflow-tooltip="true" label="操作">
                                      <template slot-scope="scope">
                                        <el-button
                                          size="mini"
                                          type="text"
                                          icon="el-icon-view"
                                          @click="handleEdit(scope.row)">详情</el-button>
                                        <el-button
                                          size="mini"
                                          type="text"
                                          icon="el-icon-delete"
                                          @click="handleDelete(scope.row)">删除</el-button>
                                      </template>
                                    </el-table-column>
                                  </el-table>
                </div>
             <div>
                               <pagination
                                 v-show="total > 0"
                                 :total="total"
                                 :page.sync="queryParams.page"
                                 :limit.sync="queryParams.pageSize"
                                 @pagination="getList"
                                 :page-sizes="[10, 20, 30, 40]"
                                 class="pagination-container"
                               />
                             </div>
           </div>
         </div>
  </div>
</template>

<script>
    import { getInsertInfoList,updateInsertInfoIsActive,updateInsertInfoIsDelete,queryInsertDataById} from "@/api/escalation";
    export default {
        name: "index",
        data() {
            return {
                keyWord:'',
                list:[],
                total:0,
                exportLoading: false,
                queryParams:{
                    page:1,
                    pageSize:10,
                    insertDate:'',
                    status:'',
                },
                 stateList:[{name:'已填报'},{name:'填报中'},{name:'未填报'}],
                pickerOptions:{
                    disabledDate(time) {
                        // return time.getTime() >Date.now() - 8.64e7;
                    }
                },
            };
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                getInsertInfoList(this.queryParams).then((response) => {
                    console.log(response.headers)
                    this.list = response.data;
                    this.total = response.total;
                });
            },
            getListSch(){
                this.queryParams.page=1;
                this.queryParams.pageSize=10;
                this.getList();
            },
            add(){
                this.$router.push({path:'/reporthome/shujutianbao'})
            },
            reset(){
                this.queryParams.insertDate='';
                this.queryParams.status='';
                this.getList();
            },
            chageStates(row) {
                var isavtiveList={
                     id:row.id,
                     isActive:row.isActive
                }
                updateInsertInfoIsActive(isavtiveList).then((response) => {
                    if(response.updateFlag==true){
                        this.$message.info("修改成功");
                    }else{
                         this.$message.error("网络连接失败");
                    }
                    this.getList();
                });

                console.log(row,'row')

            },
            rowSateQb(data) {

            },
            handleEdit(row){
                this.$router.push({path:'/reporthome/shujutianbao',query:{month:row.insertDate,id:row.id}})
            },
            handleDelete(row){
                console.log(row,'---')
                updateInsertInfoIsDelete({id:row.id}).then((response) => {
                    if (response.updateFlag == true) {
                        this.$message.info(response.message);
                    } else {
                        this.$message.error(response.message);
                    }
                })
                this.getList();
            }
        },
    };
</script>

<style lang="scss" scoped>
  .JNPF-common-layout {
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: calc(100vh - 84px);
    background: #f7f9fb;
    .JNPF-common-layout-center {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 20px;

      .JNPF-common-search-box {
        background: #fff;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 16px;
        padding: 15px 21px 0;
        border-radius: 4px;
      }
      .JNPF-flex-main{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-radius: 4px;
      }
      .JNPF-common-layout-main {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow: hidden;
      }
      .JNPF-flex-main .el-table {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
      }
    }
  }
  .tableContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    height: 100%;
    overflow: hidden;
    padding:24px 21px 2px;
  }
  .pagination-container{
    /*background: #fff;*/
    text-align: right;
    overflow: auto hidden;
    margin-top: 10px;
    padding-right: 10px;
    height:50px;
  }
  .titleName{
    text-align: center;
    font-size: 23px;
    padding:20px 0;
    font-weight:600;
  }
  .rowState {
    display: flex;
    height: 48px;
    line-height: 48px;
    background: #fff;
    margin-bottom: 20px;
    cursor: pointer;
    .rowStateItem {
      display: flex;
      align-items: center;
    }
  }
  .activeColor {
    // width: 142px;
    height: 34px;
    text-align: center;
    font-size: 14px;
    line-height: 34px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #59709d;
    padding: 0 20px;
  }
  .activeColorActive {
    background: #3d78fc;
    border-radius: 12px;
    // width: 142px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    padding: 0 20px;
    color: #fff;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  ::v-deep .el-pagination{
    right:100px;
  }
  /*::v-deep .el-form-item{*/
  /*  margin-bottom: 0;*/
  /*}*/
</style>

